<script lang="ts" setup>

import "../style.css";
import "../ui.css";
import {ref} from "vue";
import {replace, util} from "../ts/util";
import {NButton, NSpace, useDialog, useMessage} from "naive-ui";
import {BaseButton, BaseInput} from "../ts/type.ts";

util.msg = useMessage()
util.dialog = useDialog()

let value = ref<any>({
  username: null,
  password: null
})

let forms = [
  replace(new BaseInput('账号：', 'username'), {span: 24}),
  replace(new BaseInput('密码：', 'password'), {type: "password", span: 24})
]

let operations = [
  replace(new BaseButton('去注册', () => {
    console.log("去注册")
  }), {
    style: "primary"
  }),
  replace(new BaseButton('登录', () => {
    console.log("登录")
  }), {
    style: "success",
  })
]
</script>

<template>
  <n-card title="登录">
    <n-form
        :model="value"
        label-placement="left"
        label-width="auto"
    >
      <n-grid :cols="24" :x-gap="24">
        <template v-for="input in forms">
          <n-form-item-gi v-if="input.inputType == 'text'" v-bind="input">
            <n-input v-model:value="value[input.path]" v-bind="input"/>
          </n-form-item-gi>
        </template>
      </n-grid>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="24">
          <n-space
              justify="space-evenly"
          >
            <template
                v-for="btn in operations"
            >
              <n-button
                  v-if="btn.exist"
                  :block="btn.block"
                  :circle="btn.circle"
                  :color="btn.color"
                  :dashed="btn.dashed"
                  :disabled="btn.disabled"
                  :ghost="btn.ghost"
                  :round="btn.round"
                  :size="btn.size"
                  :text-color="btn.textColor"
                  :type="btn.type"
                  @click="btn.click"
              >
                {{ btn.text }}
              </n-button>
            </template>
          </n-space>
        </n-form-item-gi>
      </n-grid>
    </n-form>
  </n-card>
</template>

<style scoped>
</style>